<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            width:300px;
            height:300px;
            background-color:bisque;
            margin:0 auto;
        }
    </style>
</head>
<body>


    <div id="app">
        firstName:<input type="text" name="firstName" id="" value="" v-model="firstName">
        lastName:<input type="text" name="firstName" id="" value="" v-model="lastName">
          <p><input type="text" name="firstName" id="" value="" v-model="fullName"></p>
            <p :id="firstName"></p>
    </div>


    <script language="javaScript" src="../JS文件/vue.js"></script>
    <script language="javaScript">
        var vm = new Vue({
            el:"#app",
            data:{
                firstName:"jeck",
                lastName:"jones",
            },
            computed:{
                fullName:{
                    // getter
                    get:function(){
                        return this.firstName+this.lastName;

                    },
                    set:function(newValue){
                        var names=newValue.split(' ')
                            this.firstName=names[0]
                            this.lastName=names[names.length-1]
                    }
                }
            }

        })
    </script>
</body>
</html>